<div class="splash" ng-cloak="">
    <h2>Loading</h2>
</div>

<div>
    <header>
        <h3>Contacts</h3>
    </header>

    <div>
        <a class="nav-pills hover" href="#/add-contact">Add Contact</a>
    </div>
    <br /><br />

    <div ng-controller="ContactsController">
        <div data-ng-include="messagesView" class="row"></div>
        <div data-ng-include="gridControlsView" class="row"></div>

        <table class="table table-striped table-condensed table-hover">
            <thead>
                <tr>
                    <th class="id">
                        <a data-ng-click="setOrder('id')">Id&nbsp;
                            <span data-ng-show="request.orderBy=='id'">
                                <span data-ng-show="request.orderDir=='DESC'" class="glyphicon glyphicon-arrow-up"></span>
                                <span data-ng-show="request.orderDir=='ASC'" class="glyphicon glyphicon-arrow-down"></span>
                            </span>
                        </a>
                    </th>
                    <th class="firstName">
                        <a ng-click="setOrder('firstName')">First Name&nbsp;
                            <span data-ng-show="request.orderBy=='firstName'">
                                <span data-ng-show="request.orderDir=='DESC'" class="glyphicon glyphicon-arrow-up"></span>
                                <span data-ng-show="request.orderDir=='ASC'" class="glyphicon glyphicon-arrow-down"></span>
                            </span>
                        </a>
                    </th>
                    <th class="lastName">
                        <a ng-click="setOrder('lastName')">Last Name&nbsp;
                            <span data-ng-show="request.orderBy=='lastName'">
                                <span data-ng-show="request.orderDir=='DESC'" class="glyphicon glyphicon-arrow-up"></span>
                                <span data-ng-show="request.orderDir=='ASC'" class="glyphicon glyphicon-arrow-down"></span>
                            </span>
                        </a>
                    </th>
                    <th class="email">
                        <a ng-click="setOrder('email')">Email&nbsp;
                            <span data-ng-show="request.orderBy=='email'">
                                <span data-ng-show="request.orderDir=='DESC'" class="glyphicon glyphicon-arrow-up"></span>
                                <span data-ng-show="request.orderDir=='ASC'" class="glyphicon glyphicon-arrow-down"></span>
                            </span>
                        </th>
                    <th class="address">Address</th>
                    <th class="firstPhone">First Phone</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            
            <tbody>
                <tr ng-repeat="item in contacts">
                    <td>{{item.id}}</td>
                    <td>{{item.firstName}}</td>
                    <td>{{item.lastName}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.address}}</td>
                    <td>{{item.phones[0].phoneNumber}}</td>
                    <td><a ng-click="editContact(item.id)" class="glyphicon glyphicon-edit" href="javascript:void(0);"></a></td>
                    <td><a ng-click="removeContact(item.id)" class="glyphicon glyphicon-remove" href="javascript:void(0);"></a></td>
                </tr>
            </tbody>
        </table>

        <div data-ng-include="paginationView" class="pagination pull-right"></div>
    </div>
</div>
